<!--
 * @Author: ShiJunJie
 * @Date: 2021-11-02 14:18:52
 * @LastEditors  : ShiJunJie
 * @LastEditTime : 2022-04-20 11:37:02
 * @Descripttion: 
-->
<template>
  <div class="base-table-page">
    <a-pagination
      showQuickJumper
      :current="page"
      :pageSize="size"
      :total="total"
      :showTotal="(total:any) => `共 ${total} 条`"
      :showSizeChanger="true"
      @change="onChange"
      @showSizeChange="onShowSizeChange"
    ></a-pagination>
  </div>
</template>

<script setup lang="ts">
export type size = 10 | 20 | 30 | 40;
interface __defineProps {
  total: number;
  page: number;
  size: size;
}
const props = withDefaults(defineProps<__defineProps>(), {
  total: 0,
  page: 1,
  size: 10
});
const emit = defineEmits(['pageChange']);

let pageChangeType = ref(false);

const onChange = (page: any, size: any) => {
  if (pageChangeType.value) {
    pageChangeType.value = false;
    return false;
  }
  // console.log("页码改变: ", { page, size })
  return emit('pageChange', page, size);
};
const onShowSizeChange = (page: any, size: any) => {
  // console.log("页条数改变: ", { page, size })
  pageChangeType.value = true;
  emit('pageChange', 1, size);
};
</script>

<style lang="less" scoped>
.base-table-page {
  display: flex;
  // box-shadow: 0px -4px 7px 0px #e0e0e09e;
  padding: 20px 20px 0 20px;
  position: relative;
  z-index: 100;

  &::before {
    content: '';
    flex-grow: 1;
  }
}
</style>
